<template>
  <div>
    <!-- 添加查找 -->
    <el-space>
      <el-input v-model="text" style="width: 300px" placeholder="请输入管理员名称" />
      <el-button type="primary" :icon="Search" @click="findRole">查找</el-button>
      <el-button type="primary" :icon="Edit" @click="handleAdd">添加</el-button>
    </el-space>
    <!-- 表格数据 -->
    <el-table :data="administratorData" border>
      <el-table-column prop="id" label="管理员ID" />
      <el-table-column prop="username" label="管理员名称" />
      <el-table-column prop="realname" label="真实姓名" />
      <el-table-column prop="phone" label="电话" />
      <el-table-column prop="roleIds" label="管理员角色">
        <template #default="scope">
          <el-space wrap>
            <el-tag v-for="item in scope.row.roleIds" :key="item">{{ getValue(item) }}</el-tag>
          </el-space>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
      <!-- 添加表单 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
        v-if="title?'创建':'编辑'"
      >
        <div class="from">
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model.trim="ruleForm.username" :disabled="title=='编辑'" />
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="ruleForm.password" />
          </el-form-item>
          <!-- 手机号 -->
          <el-form-item label="手机号" prop="phone">
            <el-input v-model.trim="ruleForm.phone" />
          </el-form-item>
          <!-- 真实姓名 -->
          <el-form-item label="真实姓名" prop="realname">
            <el-input v-model.trim="ruleForm.realname" />
          </el-form-item>
        </div>
        <!-- 选择角色 -->
        <el-form-item label="角色" prop="roleIds" v-if="title=='创建'">
          <el-select v-model="ruleForm.roleIds" placeholder="请选择角色">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleIds" v-if="title=='编辑'">
          <el-select
            multiple
            filterable
            allow-create
            default-first-option
            :reserve-keyword="false"
            v-model="ruleForm.roleIds"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="title == '创建' ? newlyIncreased() : modiFication()"
          >{{ title == "创建" ? "新增" : "修改" }}</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
  </div>
</template>

<script>
import { Search, Edit } from "@element-plus/icons-vue";
import { post, get } from "@/utlis/http";
export default {
  components: {
    Search,
    Edit,
  },
  data() {
    return {
      text: "", //输入框文字
      administratorData: [], //表格数据
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10, //总条数
      },
      dialogVisible: false, //对话框
      title: "创建", //判断是创建还是修改
      ruleForm: {
        username: "", //名称
        password: "", //密码
        phone: "", //电话
        realname: "", //真实姓名
        roleIds: "", //角色
      },
      options: [],
    };
  },
  created() {
    this.initiaLize();
    this.roleEnumeration();
  },
  setup() {
    return {
      Search,
      Edit,
    };
  },
  methods: {
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    //渲染数据
    initiaLize() {
      let data = {
        _gp: "admin",
        _mt: "list",
        page: this.pages.page,
        limit: this.pages.limit,
        username: this.text,
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.administratorData = data.items;
          this.pages.total = data.total;
        }
      });
    },
    //角色枚举
    roleEnumeration() {
      let roleData = {
        _gp: "admin.role",
        _mt: "options",
      };
      post(roleData).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.options = data;
        }
      });
    },
    // 管理员角色
    getValue(item) {
      for (const key of this.options) {
        if (key.value == item) {
          return key.label;
        }
      }
    },
    verifiCation() {
      let realname = /^[\u2E80-\u9FFF]+$/;
      let phone = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (this.ruleForm.username == "") {
        ElMessage.warning("用户名不能为空");
        return;
      }
      if (this.ruleForm.password == "") {
        ElMessage.warning("密码不能为空");
        return;
      }
      if (this.ruleForm.phone == "") {
        ElMessage.warning("手机号不能为空");
        return;
      } else if (!phone.test(this.ruleForm.phone)) {
        ElMessage.warning("手机号输入不合法,必须为11位数字并填写正确的格式");
        return;
      }
      if (this.ruleForm.realname == "") {
        ElMessage.warning("真实姓名不能为空");
        return;
      } else if (!realname.test(this.ruleForm.realname)) {
        ElMessage.warning("真实姓名输入必须是汉字");
        return;
      }
      if (this.ruleForm.roleIds == "") {
        ElMessage.warning("角色不能为空");
        return;
      }
      return "ok";
    },
    //查找
    findRole() {
      this.initiaLize();
    },
    // 添加
    handleAdd() {
      this.dialogVisible = true;
      this.title = "创建";
      this.ruleForm = {
        username: "", //名称
        password: "", //密码
        phone: "", //电话
        realname: "", //真实姓名
        roleIds: "", //角色
      }; //每次点开添加的弹出框清空
    },
    newlyIncreased() {
      if (this.verifiCation() == "ok") {
        let data = {
          _gp: "admin",
          _mt: "create",
          adminDTO: JSON.stringify({ ...this.ruleForm }),
        };
        post(data).then((res) => {
          let { errno, errmsg } = res.data;
          if (200 == errno) {
            ElMessage.success("新增成功");
            this.dialogVisible = false;
            this.initiaLize();
          } else {
            ElMessage.warning(errmsg);
          }
        });
      }
    },
    //修改
    handleEdit(row) {
      Object.assign(this.ruleForm, row);
      this.title = "编辑";
      this.dialogVisible = true;
    },
    //保存修改
    modiFication() {
      if (this.verifiCation() == "ok") {
        let data = {
          _gp: "admin",
          _mt: "edit",
          adminDTO: JSON.stringify({ ...this.ruleForm }),
        };
        post(data).then((res) => {
          let { errno, errmsg } = res.data;
          if (200 == errno) {
            ElMessage.success("修改成功");
            this.dialogVisible = false;
            this.initiaLize();
          } else {
            ElMessage.warning(errmsg);
          }
        });
      }
    },
    //删除
    handleDelete(row) {
      let data = {
        _gp: "admin",
        _mt: "delete",
        id: row.id,
      };
      post(data).then((res) => {
        if (200 == res.data.errno) {
          ElMessageBox.confirm("确定删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              ElMessage.success("删除成功");
              this.initiaLize();
            })
            .catch(() => {
              ElMessage.info("已取消删除");
            });
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    //重置
    resetForm() {
      if (this.title == "创建") {
        this.ruleForm.username = "";
        this.ruleForm.password = "";
        this.ruleForm.phone = "";
        this.ruleForm.realname = "";
        this.ruleForm.roleIds = "";
      } else {
        this.ruleForm.phone = "";
        this.ruleForm.realname = "";
        this.ruleForm.roleIds = "";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0px 40px 0px;
}
.from {
  margin: auto;
  & /deep/ .el-form-item__label::before {
    content: "*";
    color: red;
    margin-right: 5px;
  }
  & /deep/.el-input__inner {
    width: 350px;
  }
}
</style>
